RWD 設計原則


Posted by mijouhsieh on 2023-04-06

行動裝置友善設計: mobile first - 先從最小螢幕尺寸開始考慮,小螢幕所顯示的內容和能運用的佈局有限,因此,優先考慮,隨著螢幕尺寸加大,再追加內容。

RWD有5種不同的流動模式:

  • 主體為流動 (mostly fluid)
  • 欄內容下排 (column drop)
  • 版面配置位移 (layout shifter)
  • 微小調整 (tiny tweaks)
  • 畫布外空間利用 (off canvas)

主體為流動 (mostly fluid)

「流動」即內容佈局會隨著 viewport 尺寸而流動。
這種模式有以下特性:
在小螢幕上,內容垂直堆疊;但在大螢幕上,內容會排列成多欄
當 viewport 放大到達某個 breakpoint 時,內容會停止流動,固定置中,因此不需要設定多餘的 breakpoint,又能維持網頁易讀性。


#RWD







Related Posts

《鳥哥 Linux 私房菜:基礎篇》Chapter 01 - Linux 是什麼與如何學習

《鳥哥 Linux 私房菜:基礎篇》Chapter 01 - Linux 是什麼與如何學習

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段五:求職就業+畢業)

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段五:求職就業+畢業)

學習 Git - 有些檔案想被 Git 忽略

學習 Git - 有些檔案想被 Git 忽略


Comments